import React, { Component } from 'react';
import { NavBar } from 'antd-mobile'
import './Mycollect.scss'
import { Empty } from 'antd-mobile'
import { create_unfavrequest_action } from '../store/actionCreate/index'
import { connect } from 'react-redux'
class Mycollect extends Component {
    constructor(props) {
        super(props);
        this.state = {
            arr: []
        }
    }
    handleClick(payload) {
        this.props.unfavrequest(payload)
    }
    render() {
        return (
            <div>
                <NavBar onBack={() => { this.props.history.go(-1) }}>
                    我的收藏
                </NavBar>
                <div className="banner">
                    {
                        this.props.collList.length == 0 ? (<Empty description='好凄凉，收藏夹里空空如也，快去挑选心爱的商品吧~' />) :
                            this.props.collList.map((element, index) => {
                                return (
                                    <div className="listbox_" key={index}>
                                        <img src={element.pic} alt="" />
                                        <div className="textbox">
                                            <h3>{element.name}</h3>
                                            <div className="btn">
                                                <p>活动价￥：<span>{element.salesPrice.value}</span></p>
                                                <button onClick={() => { this.handleClick(element) }}>取消收藏</button>
                                            </div>
                                        </div>
                                    </div>
                                )
                            })
                    }

                </div>
            </div>
        );
    }
}

// export default Mycollect;
export default connect(
    (state) => {
        return {
            collList: state.collList
        }
    },
    (dispatch) => {
        return {
            unfavrequest: function (payload) {
                dispatch(create_unfavrequest_action(payload))
            }
        }
    }
)(Mycollect)